<template>
  <JcBar>
    <div class="w-full flex items-center justify-between">
      <div></div>
      <div class="absolute left-1/2 -translate-x-1/2">个人中心</div>
      <div>
        <v-dialog>
          <template v-slot:activator="{ props: activatorProps }">
            <v-btn v-bind="activatorProps">
              <JIcon size="16">退出登录</JIcon>
              退出登录
            </v-btn>
          </template>
          <template v-slot:default="{ isActive }">
            <v-card title="确认退出？">
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn text="Close Dialog" @click="handleLogout(isActive)"> 是的 </v-btn>
                <v-btn text="Close Dialog" @click="isActive.value = false"> 取消 </v-btn>
              </v-card-actions>
            </v-card>
          </template>
        </v-dialog>
      </div>
    </div>
  </JcBar>
  <div class="w-full p-4 text-title">
    <div class="mt-4"><span class="text-subtitle">账号</span> {{ userInfo.email }}</div>
    <!-- <div><span class="text-subtitle">昵称 </span>{{ userInfo.nickName }}</div> -->
    <div class="mb-4"></div>
    <v-divider></v-divider>
  </div>
  <div class="w-full p-4 flex justify-around">
    <div
      @click="handleNavClick(item)"
      v-for="(item, index) in navs"
      :key="index"
      class="flex flex-col items-center justify-center"
    >
      <JIcon size="42">{{ item.icon }}</JIcon>

      <v-btn variant="text" class="mt-2 text-subtitle">{{ item.title }}</v-btn>
    </div>
  </div>
</template>
<script lang="ts" setup name="Me">
import store from "@/store";
import { computedAsync } from "@vueuse/core";
import JcBar from "@/layout/JcBar";
import JIcon from "@/icon/VIcon";
import { useRouter } from "vue-router";
import { logout } from "@/api/cloudbase-login.js";

const router = useRouter();
const userInfo = computedAsync(
  async () => {
    return await store.dispatch("login/getUserInfo");
  },
  {
    lazy: true,
  }
);

const navs = [
  {
    title: "我的收藏",
    icon: "heart-icon",
    path: "/gedanlist/我的收藏",
  },
  {
    title: "我的歌单",
    icon: "folder-music-outline",
    path: "/mygedan",
  },
];

function handleNavClick(item) {
  router.push(item.path);
}

function handleLogout(isActive) {
  store.dispatch("login/logout").then(() => {
    console.log("退出成功");
    isActive.value = false;
  });
}
</script>
